<script setup>
import { ref } from 'vue'; // 引入 Vue 3 相关的模块
import axios from 'axios';

////////////////////////////////////////////////////

//////////////////////////////////////////////////////



const xImageUrl = ref(null);
const zImageUrl = ref(null);
const baseUrl1 = 'http://115.24.173.26:8002/DigitalTwinPic/neiya/pictures/x_stress_plots/';
const baseUrl2 = 'http://115.24.173.26:8002/DigitalTwinPic/neiya/pictures/z_stress_plots/';

let press = ref(0);
const stuNo = sessionStorage.getItem("stuNo").replace(/"/g, "");
console.log(stuNo);


    //计算图片名
var data1 = new FormData();
    data1.append('stress', press.value);
    var config1 = {
        method: 'post',
        url: '/api/neiya/stress',
        headers: {
            'Content-Type': 'multipart/form-data; boundary=--------------------------594570228206462642755386',
        },
        data : data1
    };
const compute =()=>{
  axios(config1)
        .then(function (response) {
          console.log(JSON.stringify(response.data));
        })
        .catch(function (error) {
          console.log(error);
        });
    }


// 发起 GET 请求获取图像
const xpicture =()=>{
    axios.get('/api/neiya/xpicture')
            .then((response) => {
              // 处理响应数据
              console.log("xpicture.response.data.data",response.data.data)

              if (response.data.code === 1) {
                xImageUrl.value= baseUrl1 + response.data.data;
                console.log("xImageUrl:",xImageUrl.value);
            } else {
              alert(response.data.msg);
            }

            })
            .catch((error) => {
              console.error('获取图像失败', error);
            });
      }


const zpicture =()=>{
    axios.get('/api/neiya/zpicture')
            .then((response) => {
              // 处理响应数据
              console.log("zpicture.response.data.data",response.data.data)
              if (response.data.code === 1) {
                zImageUrl.value= baseUrl2 + response.data.data;
                console.log("zImageUrl:",zImageUrl.value);
            } else {
              alert(response.data.msg);
            }

            })
            .catch((error) => {
              console.error('获取图像失败', error);
            });
    }




compute();
xpicture();
zpicture();
</script>


<template >
<div class="page-vedio flex-base-page">
    <div class="first-vedio flex-base-vedio">
        <div class="first-vedio-left">
          <div class="block text-center" m="t-4">
            <span class="demonstration">实验步骤展示</span>
            <el-carousel trigger="click" height="250px" wight="330px">
              <el-carousel-item v-for="item in 5" :key="item">
                <!-- <h3 class="small justify-center" text="2xl">{{ item }}</h3> -->
                <img :src="'http://115.24.173.26:8002/DigitalTwinPic/step/neiya/' + item + '.jpg'" style="width: 100%; height: 100%;">
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
    </div>
    <div class="pic1 flex-base">
        <div class="pic1-left">
          <img :src="xImageUrl" class="image">
        </div>
        <div class="pic1-right flex-title">
          X方向应力云图
        </div>
    </div>
    <div class="pic2 flex-base">
        <div class="pic2-left">
          <img :src="zImageUrl" class="image">
        </div>
        <div class="pic2-right flex-title">
            Z方向应力云图
        </div>
    </div>
</div>
</template>

<style scoped>


.demonstration {
  /* color: var(--el-text-color-secondary); */
  color: black;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 250px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.plugin{
  width: 100%;
  height: 100%;
}
.page-vedio {
    height: 100%;
    width: 526px;
}
.flex-base-page {
    display: flex;
    flex-direction: column;
}
.flex-base {
    display: flex;
    /* justify-content: center;
    align-items: center; */
    flex-direction: row;
}
.flex-title-first{
  display: flex;
  align-content: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  writing-mode: vertical-rl;
  font-size: 18px;
  letter-spacing: 10px;
}
.flex-title{
  display: flex;
  align-content: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  writing-mode: vertical-rl;
  font-size: 20px;
  letter-spacing: 5px;
}
.flex-base-vedio {
    display: flex;
    /* justify-content: center;
    align-items: center; */
}
.first-vedio {
    width: 100%;
    height: 276px;
    margin-left:40px;
    margin-top: 10px;
}
.first-vedio-left {
    width: 450px;
    height: 276px;
}
.first-vedio-right{
  width: 66px;
  height: 235px;
  border: 1px solid #808080;
  margin-left:7px;
  margin-top:40px;
}
.pic1 {
    width: 100%;
    height: 302px;
    margin-top:20px;
}
.pic1-left {
  width: 430px;
  height: 312px;
  margin-left:40px;
  border: 1px solid #808080;
  background-image: url('/src/');
  background-size: cover; /* 保持图片比例并覆盖整个 div */
  background-repeat: no-repeat; /* 不重复背景图片 */
}
.pic1-right {
  width: 72px;
  height: 220px;
}
.pic2 {
    width: 100%;
    height: 302px;
    margin-top:5px;
}
.pic2-left {
  width: 430px;
  height: 312px;
  margin-left:40px;
  border: 1px solid #808080;
  background-image: url('/src/');
  background-size: cover; /* 保持图片比例并覆盖整个 div */
  background-repeat: no-repeat; /* 不重复背景图片 */
}
.pic2-right {
  width: 72px;
  height: 220px;
}
.image {
  width: 100%; /* 图像宽度与外层盒子宽度一致 */
  height: 100%; /* 图像高度与外层盒子高度一致 */
  object-fit: cover; /* 调整图像以填充整个图像框 */
}
</style>
